<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>

<script>
    // Class 类的继承
    class Point {

    }
    class ColorPoint extends Point {
        constructor (x,y,colir) {
            super(x,y)
            this.color = color
        }
        toString() {
            return this.color  + '' + super.toString()
        }
    }
</script>
</html> -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .remind-block {

            height: 30px;

            line-height: 30px;

            background-color: #fce9aa;

            color: #947334;

            position: relative;

            overflow: hidden;

            text-align: center;

            width: 100%;

            padding-right: 20px;

            z-index: 100;

        }

        .marquee-block {

            display: inline-block;

            width: 100%;

            height: 100%;

            vertical-align: middle;

            overflow: hidden;

            box-sizing: border-box;

            padding-left: 15px;

            position: relative;

        }

        .marquee {

            animation: marquee 10s linear infinite;

            white-space: nowrap;

            position: absolute;

        }

        .marqueeT {

            animation: marqueeT 10s linear infinite;

            white-space: nowrap;

            position: absolute;

        }

        @keyframes marquee {

            0% {
                left: 0;
            }

            100% {
                left: -100%;
            }

        }

        @keyframes marqueeT {

            0% {
                left: 105%;
            }

            100% {
                left: 0;
            }

        }

        .remind-block span {

            border-bottom: 1px solid #947334;

            font-weight: bold;

        }

        .remind-block img {

            height: 20px;

            position: absolute;

            right: 2px;

            top: 5px;

        }
    </style>

</head>

<body>

    <div class="remind-block">
        <div class="marquee-block">
            <div class="marquee">这是一段很长的滚动文字这是一段很长的滚动文字这是一段很长的滚动文字这是一段很长的滚动文字这是一段很长的滚动文字这是一段很长的滚动文字&nbsp;&nbsp;&nbsp;
            </div>
            <div class="marqueeT">这是一段很长的滚动文字&nbsp;&nbsp;&nbsp;</div>
        </div>
    </div>
</body>
    <script>
        const courseObj =[
        {
            name:'java',price:149,
        },
        {
            name:'mySql',price:185,
        },
        {
            name:'javaScript',price:200,
        },
        ]
        class User {
            constructor(data) {
                this.model = data;
            }
            price() {
                return this.model.price
            }
            static createdArr(data) {
                return data.map( item => new this(item))
            }
            //挑选最贵的课程
            static MaxPrice(data) {
                  return  data.sort((a,b)=>  b.price() - a.price())[0]
            }
            // 课程合计
            static totalPrice(data) {
                return data.reduce((total,el) => {
                  return   total + el.price()
                },0)
            }
        }
        
        let lesson = User.createdArr(courseObj)
        console.dir(lesson)
        let max_price = User.MaxPrice(lesson)
        console.log(max_price.model.price)
        console.log(max_price.model.name)
        console.log(User.totalPrice(lesson))
   

    </script>

</html>